


<script setup lang="ts">

import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {showToast} from "vant"; // 获取参数 用 useRoute


const route = useRoute(); // 获取参数 用 useRoute




 const learns = ref({
   videoId: 0,
   videoUrl: '',
   videoDescription: '',
   videoNote: 0,
   topics: []
})

const topic =  ref({
  id: 0,
  content: '',
  choice: '',
  solution: "",
  analysis: '',
  experienceProvided: 0,
})



const rUrl = ref('')
const rDescription = ref('')
const videoDesc= ref('')
const tops = ref<{
  id: number,
  content: string,
  choice: string,
  solution: string,
  analysis: string,
  experienceProvided: number,
}[]>([])


onMounted(() => {
  myAxios.get('/learn/careful', {
    params: {
      videoId: route.query.id
    }
  })
      .then((res:any) => {
        learns.value = res.data.data
        console.log(res.data)
        console.log(learns)
        rUrl.value = learns.value.videoUrl ?? "";
        videoDesc.value = learns.value.videoDescription ?? "";
        rDescription.value = learns.value?.videoDescription ?? "";
        tops.value = learns.value?.topics ?? [];
        topic.value = tops.value[0] ?? {
          id: 0,
          content: "",
          choice: "",
          solution: "",
          analysis: "",
          experienceProvided: 0,
        }
      })
      .catch(err => {
        console.log(err)
      })
})

const currentPage = ref(1);
const checked = ref('0');


const changePage = (page: number) => {
  text.value = '';
  currentPage.value = page;
  topic.value = tops.value[page - 1] ?? {
    id: 0,
    content: "",
    choice: "",
    solution: "",
    analysis: "",
    experienceProvided: 0,
  }
}
const onClick = () => {
  text.value = '';
  show.value = true;
};
const show = ref(false);


const checkAnswer = (choice: string, solution: String) => {
  if (choice === solution) {
     //正确
    myAxios.get('/user/topic/experience', {

      params: {
        topicId: topic.value.id,
  }
    })
      .then((res:any) => {
        console.log(res.data.data)
        showToast('正确！经验值+'+res.data.data)

      })
      .catch(err => {
        console.log(err)
      })
  }
  else{
     //错误
    showToast('错误！')
  }
}


const aaa = (choice: string, solution: string) => {
  flag1.value = choice;
  flag2.value = solution;
}

const flag1 = ref('')
const flag2 = ref('')
const tex = ref('')

const text = ref('')
const onHero = (analysis: string) => {


  text.value = '';
  tex.value = analysis;

  let index = 0;

  function type() {
    if (index < tex.value.length) {
      text.value += tex.value.charAt(index);
      index++;
      setTimeout(type, 40); // 设置打字速度
    }
  }
  type()

}


</script>

<template>
  <van-nav-bar class="nav-bar"
               :title="videoDesc"
  >
  </van-nav-bar>
  <div id="building">
    <img src="../assets/最终返回键.png" class="back-btn1" alt="返回" @click="$router.back"/>

  </div>

  <div class="show-video">

    <video :src = "rUrl"  width="100%" height="100%" controls type="video/wmv"></video>

  </div>

<!--  <div class="on-show-topic" id="on-show-topic" style="opacity: 1;">-->
<!--    <img src="../assets/最终人物立绘2.png" class="hero-onshow" @click="onShow">-->
<!--    <p class="text-location">点我开始练习</p>-->
<!--  </div>-->
  <div class="show-topic" id="show-topic">
    <div class="back-img"/>
    <van-pagination
        v-model="currentPage"
        prev-text="上一题"
        next-text="下一题"
        items-per-page="1"
        :total-items="tops.length"
        :show-page-size="3"
        force-ellipses
        @change="changePage"
    />

    <div v-if="topic" >
      <p style="margin-top: 15%">{{topic.content}}</p>
      <div v-for="choice in topic.choice.split('\n')" class="choice" :key="choice">
        <van-radio-group v-model="checked" direction="horizontal">
          <van-radio :name="choice" @click="aaa(choice,topic.solution)">{{ choice }}</van-radio>
        </van-radio-group>
      </div>
      <button class="btn" @click="checkAnswer(flag1,flag2)">确认答案</button>

      <div class="analysis">
        <van-floating-bubble
            icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/wjtz_icon_guize.png"
            @click="onClick" />
        <van-popup v-model:show="show" class="analysis-popup" >
              <div class="analysis-title">
                <p class="analysis-title-text">题目解析</p>
              </div>
            <div class="analysis-content">
              <p >{{text}}</p>
            </div>
            <div class="portrait" id="portrait">
              <img src="../assets/最终人物立绘2.png" class="hero-img" @click="onHero(topic.analysis)">
            </div>
        </van-popup>
      </div>


    </div>

  </div>


</template>

<style scoped>


.analysis-title{
    position: relative;
    width: 100%;
    height: 24px;
    border-radius: 10px 10px 0 0;
}
.analysis-title-text{
  font-family: STXingkai,serif  ;
  font-size: 24px;
  color: #000;
  text-align: center;
  margin-top: 20px;
}


.btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100px;
  height: 40px;
  left: 39%;
  background-color: #3cd5da;
}

.choice {
  left: 5%;
  width: 80%;
  height: 40px;
  position: relative;
}

.analysis-popup{

  width: 85%;
  height:85%;
  position: absolute;
  background-image: url("../assets/最终题目解析背景.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  padding: 10%;
}
.portrait{
  width: 50%;
  height: 40%;
  position: absolute;
  top: 55%;   /*55*/
  left: -5%;
}
.hero-img{
  width: 90%;
  height: 90%;
}


.show-video {
  width: 100%;
  height: calc(50vh - 23px);
  top: 46px;
}
.back-img {
  position: absolute;
  top: 52%;
  left: 0;
  width: 100%;
  height: 52%;
  background-image: url("../assets/题目背景.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.3;
  z-index: 0;
}
.show-topic {
  width: 100%;
  height: calc(50vh - 23px);
  top: 0;

}


.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity: 1;
  z-index: 1;
}

.back-btn1 {
  position: fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index: 2;
}
</style>